extends archetypes/single-column.pug

block content
  section.row.fill-white.p-xlarge.m-l-none.m-r-none.section-best-practices
    .container
      .col-md-12.z-10.text-center.pos-rel.screen-mockup
        img.w100p.m800.img-responsive.pos-rel.m-l-r-auto(src="https://res.cloudinary.com/hilnmyskv/image/upload/v1500908806/mockup-javascript_qu8tn6.png", alt="Mockup instantsearch", width="800")

      .col-md-12.z-10
        .col-md-6.hidden-sm
          img.section-illustration(src="assets/img/instantsearch-components.svg", alt="InstantSearch components", width="525", height="254.67")
        .col-md-6.p-l-xlarge
          header
            h3.no-p-t.m-t-none Design Best Practices
          .spacer16.visible-sm
          img.section-illustration.visible-sm(src="assets/img/instantsearch-components.svg", alt="InstantSearch components", width="525", height="254.67")
          .spacer24
          p.color-logan.text-regular.text-normal InstantSearch.js comes with 18 widgets to cover a wide variety of search use cases. They have been designed to  bring search UI best practices to your  website.
          .spacer24
          a.btn.btn-static-theme.b-n.elevation0(href="widgets.html", title="instantSearch.js widgets").
            Discover widgets
            <svg> <use xlink:href="#arrow-right"></svg>

      .inline.spacer80
      .inline.spacer120

  section.row.fill-titan.p-xlarge.m-l-none.m-r-none.pos-rel.section-infinite-possibilities
    .container
      .inline.spacer40
      .inline.spacer40.hidden-sm
      .col-md-12.z-10
        .col-md-6.p-r-xlarge
          header
            h3.no-p-t.m-t-none Infinite possibilities
          .spacer16.visible-sm
          img.section-illustration.visible-sm(src="assets/img/infinite-possibilities.svg", alt="Illustration infinite-possibilities", width="525", height="343.14")
          .spacer24
          p.color-logan.text-regular.text-normal Build the ideal search experience you’ve imagined for your users by customizing our existing widgets or building your own.
          .spacer24
          a.btn.btn-static-theme.b-n.elevation0(href="examples.html", title="instantSearch.js examples").
            Learn more
            <svg><use xlink:href="#arrow-right"></svg>

        .col-md-6.hidden-sm
          img.section-illustration(src="assets/img/infinite-possibilities.svg", alt="Illustration infinite-possibilities", width="525", height="343.14")

      .inline.spacer80
      .inline.spacer40
      .inline.spacer40.hidden-sm

  section.row.fill-white.p-xlarge.m-l-none.m-r-none.pos-rel.section-framework
    .container
      .inline.spacer40
      .inline.spacer40.hidden-sm
      .col-md-12.z-10
        .col-md-6.p-r-xlarge
          .spacer64.hidden-sm
          img.section-illustration(src="assets/img/framework-agnostic.svg", alt="Illustration framework-agnostic", width="510", height="148.86")
        .col-md-6
          header
            h3.no-p-t.m-t-none No framework needed
          .spacer24
          p.color-logan.text-regular.text-normal InstantSearch.js does not depend on any framework like jQuery or React. You can still plug yours if you want a smooth integration.
          .spacer24
          a.btn.btn-static-theme.b-n.elevation0(href="getting-started.html", title="Get started with instantSearch.js").
            Get started
            <svg> <use xlink:href="#arrow-right"></svg>
      .inline.spacer40
      .inline.spacer40.hidden-sm
      .inline.spacer120

  section.row.fill-titan.p-xlarge.live-section.m-l-none.m-r-none.pos-rel
    .container
      .inline.spacer40
      .inline.spacer40.hidden-sm
      .col-md-12.z-10.text-center.row
        header
          h3.no-p-t.m-t-none See it live
        .spacer40
        .row.h300
          .col-md-4.pos-rel
            a(href="examples/e-commerce/")
              .card.fill-white.elevation1.radius6.p-large.h300.flex-container.flex-dir-row
                .spacer16
                img.flex-it-1.h80(src="assets/img/example-e-commerce.svg", alt="E-commerce icon")
                h3.text-lg.text-demi.m-t-none.no-p-t.flex-it-1.color-bunting.no-decoration E-commerce
                span.flex-it-1 See it live

          .col-md-4.pos-rel
            a(href="examples/media/")
              .card.fill-white.elevation1.radius6.p-large.h300.flex-container.flex-dir-row
                .spacer16
                img.flex-it-1.h80(src="assets/img/example-media.svg", alt="Media icon")
                h3.text-lg.text-demi.m-t-none.no-p-t.flex-it-1.color-bunting.no-decoration Media
                span.flex-it-1 See it live

          .col-md-4.pos-rel
            a(href="examples/tourism/")
              .card.fill-white.elevation1.radius6.p-large.h300.flex-container.flex-dir-row
                .spacer16
                img.flex-it-1.h80(src="assets/img/example-tourism.svg", alt="Travel icon")
                h3.text-lg.text-demi.m-t-none.no-p-t.flex-it-1.color-bunting.no-decoration Travel
                span.flex-it-1 See it live

      .inline.spacer40
      .inline.spacer40.hidden-sm
      .inline.spacer80

  section.row.fill-white.p-xlarge.discover-section.m-l-none.m-r-none.pos-rel
    .container
      .inline.spacer80
      .col-md-12.z-10.text-center.row
        header
          h3.no-p-t.m-t-none Discover the<br/>InstantSearch family

        .spacer80
        .row.h100.logos-container
          .col-md-12
            //- .col-md-4.col-md-offset-4
            //-   .card.p-large.h100.fill-white.elevation1.radius6.text-left
            //-     a(href="#")
            //-       figure
            //-         img(src="assets/img/InstantSearch-Generic.svg", alt="Logo InstantSearch")
            //-         figcaption InstantSearch

          .spacer32.inline
          .col-md-12
            .col-md-6.pos-rel.p-b-large.col-md-offset-2
              div.heading.w100p.text-left
                small.color-logan InstantSearch for native
          .col-md-12.mobile-projects
            .col-md-4.col-md-offset-2
              .card.fill-white.elevation1.radius6.p-large.h100.text-left
                a(href="https://community.algolia.com/instantsearch-android/")
                  figure
                    img(src="assets/img/InstantSearch-Android.svg", alt="Logo InstantSearch Android")
                    figcaption InstantSearch for Android
            .col-md-4
              .card.fill-white.elevation1.radius6.p-large.h100.text-left
                a(href="https://community.algolia.com/instantsearch-ios/")
                  figure
                    img(src="assets/img/InstantSearch-iOS.svg", alt="Logo InstantSearch iOS")
                    figcaption InstantSearch for iOS

        .spacer40.inline
        .row.desktop-projects
          .col-md-10.p-b-large
            div.heading.w100p.text-left.m-l-large
              small.color-logan InstantSearch for web
          .col-md-12
            .col-md-3.col-sm-6
              .card.fill-white.elevation1.radius6.p-large.h100.text-left
                a(href="https://community.algolia.com/instantsearch.js/v2")
                  figure
                    img.logo-is.w100p(src="assets/img/InstantSearch-JavaScript.svg", alt="Logo InstantSearch Javascript")
                    figcaption InstantSearch for Javascript
            .col-md-3.col-sm-6
              .card.fill-white.elevation1.radius6.p-large.h100.text-left
                a(href="https://community.algolia.com/react-instantsearch/")
                  figure
                    img.logo-is.w100p(src="assets/img/InstantSearch-React.svg", alt="Logo InstantSearch React")
                    figcaption InstantSearch for React
            .col-md-3.col-sm-6
              .card.fill-white.elevation1.radius6.p-large.h100.text-left
                a(href="https://community.algolia.com/vue-instantsearch")
                  figure
                    img.logo-is.w100p(src="assets/img/InstantSearch-Vue.svg", alt="Logo InstantSearch Vue")
                    figcaption InstantSearch for Vue.js
            .col-md-3.col-sm-6
              .card.fill-white.elevation1.radius6.p-large.h100.text-left
                a(href="https://community.algolia.com/angular-instantsearch")
                  figure
                    img.logo-is.w100p(src="assets/img/InstantSearch-Angular.svg", alt="Logo InstantSearch Angular")
                    figcaption InstantSearch for Angular

      .inline.spacer80


